<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ page import="org.apache.struts.taglib.html.Constants" %>
<%@ page import="org.apache.struts.Globals" %>
<%@page import="live.common.Format"%>
<%@page import="org.apache.struts.util.TokenProcessor"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
TokenProcessor.getInstance().saveToken(request);
%>
<!doctype html>
<html style="overflow:hidden">
<head>
<base href="<%=basePath %>">
<META content="text/html; charset=UTF-8" http-equiv="Content-Type">
<META http-equiv="X-UA-Compatible" content="IE=EmulateIE7">
<link rel="stylesheet" type="text/css" href="hfcz/css/grids.css" />
<script type="text/javascript" src="script/jquery-1.4.2.min.js"></script>
<link rel="stylesheet" type="text/css" href="hfcz/css/tel_charging.css" />
<title>充话费-充值中心</title>
</head>

<body class="telephone">

			<form class="tel-form" id="J_TelForm" method="get" action="/hfcz/directFill.do" target="_parent" onsubmit="return valPost();" style="width: auto;">
			<input type="hidden" name="org.apache.struts.taglib.html.TOKEN" value="<%=session.getAttribute("org.apache.struts.action.TOKEN")%>"/>   
			<!--标题-->

			<div class="tel-title" title="安全、快捷、方便">安全、快捷、方便</div>

			<!--号码-->
			
			<div class="tel-section tel-num" style="width: 700px;">

				<label class="tel-section-title" for="J_TelInput">充值类型：</label>

				<div class="tel-section-field">

					<div class="tel-num-wrapper" id="J_TelInputRadio" style="width: 100%;">
							<input type="radio" name="chargeType" onclick="refreshPros()" id="ct_0" value="0" checked="checked" onclick="checkType()"><label for="ct_0">电信固话</label>
							<input type="radio" name="chargeType" onclick="refreshPros()" id="ct_1" value="1" onclick="checkType()"><label for="ct_1">电信小灵通</label>
							<input type="radio" name="chargeType" onclick="refreshPros()" id="ct_2" value="2" onclick="checkType()"><label for="ct_2">联通固话</label>
							<input type="radio" name="chargeType" onclick="refreshPros()" id="ct_3" value="3" onclick="checkType()"><label for="ct_3">联通小灵通</label>
					</div>

				</div>

			</div>

			<div class="tel-section tel-num">

				<label class="tel-section-title" for="J_TelInput_frist">充值号码：</label>
				<div class="tel-section-field">
					<div class="tel-num-wrapper" id="J_TelInputBox">
					<table cellpadding="0" cellspacing="0" width="172" style="margin-top:-5px;">
						<tr>
							<td height="39" width="47"><input class="tel-num-input-first" id="J_TelInput_frist" maxlength="4" value="区号" autocomplete="off" name="phone" type="text"></td>
							<td height="39" width="15">—</td>
							<td height="39" width="108"><input class="tel-num-input-second" id="J_TelInput_second" maxlength="8" value="号码" autocomplete="off" name="phone" type="text"></td>
						</tr>
					</table>
					</div>
					<input id="J_TelInput" autocomplete="off" name="phone-cfm" type="hidden" value="" />
					<span class="tel-num-msg" id="J_TelInputMsg"></span>

				</div>

			</div>
			<!--二次确认-->

			<div class="tel-section tel-num tel-num-cfm" id="J_TelInputCfmPanel">

				<label class="tel-section-title" for="J_TelInputCfm_first">确认号码：</label>

				<div class="tel-section-field">
				<div class="tel-num-wrapper" id="J_TelInputCfmBox">
					<table cellpadding="0" cellspacing="0" width="172" style="margin-top:-5px;">
						<tr>
							<td height="39" width="47"><input class="tel-num-input-first" id="J_TelInputCfm_first" maxlength="4" value="区号" autocomplete="off" name="phone" type="text"></td>
							<td height="39" width="15">—</td>
							<td height="39" width="108"><input class="tel-num-input-second" id="J_TelInputCfm_second" maxlength="8" value="号码" autocomplete="off" name="phone" type="text"></td>
						</tr>
					</table>
					</div>
					<input id="J_TelInputCfm" autocomplete="off" name="phone-cfm" type="hidden" value="" />
					<span class="tel-num-msg" id="J_TelInputCfmMsg"></span>
				</div>

			</div>

			<!--号码归属地及网络服务提供商信息-->


			<!--充值方式-->

			<div class="tel-section tel-method" id="J_TelMethodPanel">

				<label class="tel-section-title">充值方式：</label>

				<div class="tel-section-field">

					<div class="tel-method-radio" id="J_TelMethod">

						<p>

							<input id="J_MethodRadioEcard" type="radio" value="0" checked="checked" />

							<label for="J_MethodRadioEcard">自动充值<span>（1-10分钟充值到帐）</span></label>

						</p>
					</div>
				</div>

			</div>

			<!--面值-->

			<div class="tel-section" style="height: auto;">

				<label class="tel-section-title">面&nbsp;&nbsp;&nbsp;值：</label>

				<div class="tel-section-field tel-denomination" id="J_TelDenomination">

					<!-- modified by mbn 加入input的值，以供取pidvid判断 start-->

					<input id="J_Denomination100" type="radio" value="100" disabled="disabled" checked="checked" />

					<label for="J_Denomination100">100元</label>

					<input id="J_Denomination50" type="radio" value="50" disabled="disabled" />

					<label class="label-short" for="J_Denomination50">50元</label>

				</div>
			</div>
			
			<!--售价-->

			<div class="tel-section">

				<label class="tel-section-title" id="J_TelPriceLabel">售&nbsp;&nbsp;&nbsp;价：</label>

				<div class="tel-section-field">

					<span class="tel-price" id="J_TelPrice">0&nbsp;元</span>

				</div>

			</div>

			<!--立刻购买-->
			<div class="tel-buy with-ad" id="J_TelBuyPanel">
				<button class="tel-submit" id="J_TelSubmitBtn" type="button" onclick="toSubmit()" hidefocus="true">点此充值</button>
			</div>
			

			<input type="hidden" id="prodid"   name="prodid" value="" />
			
			<input type="hidden" id="realPrice"   name="realPrice" value="" />
			
			<input type="hidden" name="num" value="<%="WM"+Format.getInstance().returnSystemNum() %>"
		</form>
<script type="text/javascript"> 

function checkType(){
if($('#J_TelInputCfm').val()==$('#J_TelInput').val() && $('#J_TelInputCfm').val()!=""){ajaxPost();}else{
				 $('#J_TelInputCfmPanel').hide();
				 telDenominationInit();
				$('#J_TelInput').val('');$('#J_TelInputCfm').val('');
				$('#J_TelInputBox').html('<table cellpadding="0" cellspacing="0" width="172" style="margin-top:-5px;"><tr>'
							+'<td height="39" width="47"><input class="tel-num-input-first" id="J_TelInput_frist" maxlength="4" value="区号" autocomplete="off" name="phone" type="text"></td>'
							+'<td height="39" width="15">—</td>'
							+'<td height="39" width="108"><input class="tel-num-input-second" id="J_TelInput_second" maxlength="8" value="号码" autocomplete="off" name="phone" type="text"></td></tr></table>');
				$('#J_TelInputCfmBox').html('<table cellpadding="0" cellspacing="0" width="172" style="margin-top:-5px;">'
						+'<tr><td height="39" width="47"><input class="tel-num-input-first" id="J_TelInputCfm_first" maxlength="4" value="区号" autocomplete="off" name="phone" type="text"></td>'
						+'<td height="39" width="15">—</td>'
						+'<td height="39" width="108"><input class="tel-num-input-second" id="J_TelInputCfm_second" maxlength="8" value="号码" autocomplete="off" name="phone" type="text"></td>'
						+'</tr></table>');
				onLoad();
				}}
$(function(){onLoad();})
    function onLoad(){
    $("#J_TelInput").data("status", 0);
    $('#J_TelInput_frist')
    .keypress(function(){valInput();var obj = $(this).val();if((obj.length==1 && event.keyCode==48)||(obj.length==0 && event.keyCode!=48) ){event.keyCode=0;}})
    .keyup(function(){if($(this).val().length==4){$('#J_TelInput_second').focus();$('#J_TelInput_second').val('')}$('#J_TelInput').val($(this).val()+'-'+$('#J_TelInput_second').val());})
    .focus(function(){if($('#J_TelInput_frist').val()=='区号'){$('#J_TelInput_frist').val('');}})
    .blur(function(){if($('#J_TelInput_second').val()!='' && $('#J_TelInput_second').val()!='号码'){checkphone();}});
    $('#J_TelInput_second')
    .keypress(function(){valInput();var obj = $(this).val();if(obj.length==0 && event.keyCode==48){event.keyCode=0;};})
    .keyup(function(){$('#J_TelInput').val($('#J_TelInput_frist').val()+'-'+$(this).val());if($(this).val().length>6){$('#J_TelInputCfmPanel').show();
    }else{$('#J_TelInputCfmPanel').hide();$('#J_TelInputCfm_first').val('');$('#J_TelInputCfm_second').val('');telDenominationInit();}})
    .focus(function(){if($('#J_TelInput_frist').val().length<3){$('#J_TelInput_frist').focus();}})
    .blur(function(){checkphone();})
    ;
    $('#J_TelInputCfm_first')
    .keypress(function(){valInput();var obj = $(this).val();if((obj.length==1 && event.keyCode==48)||(obj.length==0 && event.keyCode!=48) ){event.keyCode=0;}})
    .keyup(function(){ if($(this).val().length==4){$('#J_TelInputCfm_second').focus();}
    $('#J_TelInputCfm').val($(this).val()+'-'+$('#J_TelInputCfm_second').val());
    if($('#J_TelInputCfm').val()==$('#J_TelInput').val()){ajaxPost();}else{telDenominationInit();}
    });
    $('#J_TelInputCfm_second')
    .keypress(function(){valInput();var obj = $(this).val();if(obj.length==0 && event.keyCode==48){event.keyCode=0;};})
    .focus(function(){if($('#J_TelInputCfm_first').val().length<3){$('#J_TelInputCfm_first').focus();}})
    .keyup(function(){$('#J_TelInputCfm').val($('#J_TelInputCfm_first').val()+'-'+$(this).val());
    	
    	if($('#J_TelInputCfm').val()==$('#J_TelInput').val()){
				ajaxPost();
    	}else{telDenominationInit();}
    })
    .blur(function(){
    		if($('#J_TelInputCfm').val()==""){$('#J_TelInputCfmMsg').html("请输入确认号码").show();$('#J_TelInputCfm_first').focus();}
    		else{
    		if($('#J_TelInputCfm').val()!=$('#J_TelInput').val()){
    		$('#J_TelInputCfmMsg').html("两次输入不一致").show();
    		$("#J_TelInput").data("status", 0);
    		telDenominationInit();}
    	}});
    }
     function checkphone() {
        var x = $("#J_TelInput").val().replace(/\s/g, "");
        var tip = $("#J_TelInputMsg");
        tip.html("").hide();
        if (x == "") {
            $("#J_TelInput").data("status", 0);
             tip.html("").hide();
            return false;
        } else {
            var patrn = /^0[1-9](0|\d+)-[1-9]\d*$/;
            if (x != ""&&!patrn.test(x)) {
            	$('#J_TelInputCfmPanel').hide();
                tip.html("请输入正确的号码").show();
                $("#J_TelInputCfm").val("");
                $("#J_TelInput").data("status", 0);
                return false;
            }else{$('#J_TelInputCfmPanel').show();}
        }
    }
    function valPost() {
       if ($("#J_TelInput").data("status") == 1) {return true;}
        else {return false};
    }
    function telDenominationInit(){
    	var info='';
    	info+='<input id="J_Denomination100" type="radio" value="100" disabled="disabled" checked="checked" />'
		info+='\n<label for="J_Denomination100">&nbsp;100元</label>&nbsp;';
		info+='\n&nbsp;<input id="J_Denomination50" type="radio" value="50" disabled="disabled" />';
		info+='\n<label class="label-short" for="J_Denomination50">&nbsp;50元</label>';
		$("#J_TelDenomination").html(info);
		$("#J_TelDenomination").html(info);
		clear();
    }
    
     function valInput(){if(event.keyCode<48 || event.keyCode>57){event.keyCode=0;}}
      function ajaxPost(){
    $("#J_TelInputCfmMsg").hide();
        		$("#J_TelDenomination").show();
        		 $("#J_TelDenomination").html('');
				$("#J_TelDenomination").html("<img src=\"/images/ajax-loader.gif\"/>面值获取中……");
   			setTimeout(function(){
        			$.ajax({
                            type: "POST",
                            url: "/hfcz/pro.do?op=getPros",
                            timeout: 20000,
                            dataType: "json",
                            async: false,
                            data: "phone=" + $.trim($("#J_TelInputCfm").val())+"&type="+$("input[name='chargeType'][checked]").val(),
                            success: function (data) {
                                if (typeof (data) != 'undefined' && data!=null && data!=1 && data!=2) {
                                var proInfos="";
                                $(data).each(function(i){
                                	proInfos+="<input alt=\""+data[i].prodId+"\" onclick=\"checkPro(this)\" id=\"J_Denomination"+data[i].prodContent+"\" name=\"b\" type=\"radio\" value=\""+data[i].prodPrice+"\" \/>"
												+"&nbsp;<label for=\"J_Denomination"+data[i].prodContent+"\">"+data[i].prodContent+"<\/label>"
									if((i+1)%4==0){proInfos+="<BR/>"}
									
                                });
                                $("#J_TelDenomination").html(proInfos);
                                      //  $("#J_TelInfoCfm").html(data.provincename + data.isptype);
                                        $("#J_TelZone").val(data.provincename);
                                        $("#J_TelISP").val(data.isptype);
                                }
                                if(data==1){
                                    $("#J_TelDenomination").html("<font style='color:red'>暂无相关充值面额</font>");
                                }
                                if(data==2){
                                    $("#J_TelDenomination").html("<font style='color:red'>网络繁忙!</font>");
                                }
                            }
						, error: function () {
						    $("#J_TelDenomination").html("网络繁忙,请稍候重试");
						}
                        });
                        $("#J_TelInput").data("status", 0);
                        },1000);
                        return false;
   	}
    function checkPro(obj){
 		$('#J_TelPrice').html($(obj).val()+"&nbsp;元");
 		$('#prodid').val($(obj).attr('alt'));
 		$('#realPrice').val($(obj).next().text());
 		$("#J_TelInput").data("status", 1);
    }
    function clear(){
    	$('#J_TelPrice').html("0&nbsp;元");
 		$('#prodid').val("");
 		$('#realPrice').val("");
    }
    function refreshPros(){
    	if(	$("#J_TelInput").data("status")==1){ajaxPost();}	
    }
    function toSubmit(){
    checkphone();
    if(	$("#J_TelInput").data("status")==1){
		$("#J_TelSubmitBtn").removeClass("tel-submit");
		$("#J_TelSubmitBtn").text('正在处理……');	
		$("#J_TelSubmitBtn").addClass("tel-submit-lock");
		$("#J_TelSubmitBtn").unbind("click");
		$("#J_TelSubmitBtn").attr("disabled","disabled");
		$('form:first').submit();
		}
    }
</script>


	</body>

</html>



